<template>
  <el-container class="homecontainer">
    <el-header>
      <el-row>
        <el-col :span="8">
          <div class="spanconent">
            <span><font face="verdana" size="5">IMAU-JudgeOnline</font></span>
          </div>
        </el-col>

        <el-col :span="8">
          <el-menu :default-active="activeIndex" mode="horizontal" router>
            <el-menu-item index="/index"
              ><i class="el-icon-home"></i>首页</el-menu-item
            >
            <el-menu-item index="/problems"
              ><i class="el-icon-tickets"></i>题库</el-menu-item
            >
            <el-menu-item index="/judgepage"
              ><i class="el-icon-date"></i>评测</el-menu-item
            >
            <el-menu-item index="/rank"
              ><i class="el-icon-s-data"></i>排名</el-menu-item
            >
            <el-menu-item index="/help"
              ><i class="el-icon-question"></i>帮助</el-menu-item
            >
          </el-menu>
        </el-col>

        <el-col :span="8">
          <div class="spanconent">
            <!-- 用户没有登陆显示 -->
            <template v-if="!getUserName">
              <el-button type="info" @click="toLogin" >登陆</el-button>
              <el-button type="success">注册</el-button>
            </template>

            <!-- 用户登陆过后显示 -->
            <template v-else>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{getUserName}}<i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="userCenter" icon="el-icon-user">个人中心</el-dropdown-item>
                  <el-dropdown-item  command="loginOut" icon="el-icon-error">注销</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
             
            </template>

          </div>
        </el-col>
      </el-row>
    </el-header>

    <!-- 主要内容显示区域 -->
    <el-main>
      <!-- 设置路由占位符 -->
      <router-view></router-view>
    </el-main>

    <el-footer>
        <div >
          版权所有：ZuoYanCoder &nbsp; &nbsp;
          &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;开源地址：<a
            href="https://github.com/baiwei1106/bttcoj"
            target="_blank"
            >IMAU-OJ</a>
        </div>
        
      </div>
    </el-footer>
  </el-container>
</template>

<script>

import {mapState} from "vuex"
import {mapGetters} from "vuex"

export default {
  data() {
    return {
      activeIndex: "1"
    };
  },
  methods: {

    // 处理用户下拉菜单的点击事件
    handleCommand(command) {
      
        switch (command) {
          case "userCenter":
            this.$router.push("/usercenter")
            break;
          case "loginOut":
            // 清除 token 
            window.sessionStorage.removeItem("token")
            localStorage.removeItem("username")
            localStorage.removeItem("userId")
            this.$message.success("退出成功!")
            this.$router.go(0)
            break;
          default:
            break;
        }

    },
   
    // 去登陆页面的方法
    toLogin(){
      this.$router.push('/login')
    },
  
  },
  computed:{
    getUserName(){
      return localStorage.getItem("username")
    }
  }
};
</script>

<style scope>
.homecontainer {
  height: 100%;
}
.el-header {

  line-height: 60px;
}
.el-footer {
  background-color: #f1f5f8;
  
  line-height: 60px;
}



.el-menu {
  width: 500px;
}


</style>
